<!--
 * @Descripttion: 全部欠薪诉求-全部
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-12-11 13:40:05
 * @LastEditors: younghxp
 * @LastEditTime: 2021-12-20 15:19:17
-->

<template>
  <div class="container" ref="mainCon">
    <topTitle v-if="!hiddleToolBar" :titleText="`全部欠薪诉求`"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="sendAreaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="投诉人" class="row-padding-bottom">
              <el-input
                v-model="filterField.complaintPerName"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="联系电话" class="row-padding-bottom">
                <el-input
                  v-model="filterField.complaintPerTel"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="办理状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in handleStateOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="用人单位" class="row-padding-bottom">
                <el-input
                  v-model="filterField.complaintCompanyName"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="收件日期" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="办结日期" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValueTwo"
                  @getEndTimeValue="getEndTimeValueTwo"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="是否延期" class="row-padding-bottom">
                <el-select
                  v-model="filterField.isDelay"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in isDelayOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="重复号码" class="row-padding-bottom">
                <el-select
                  v-model="filterField.isRepeatTel"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in isRepeat"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="重复诉求" class="row-padding-bottom">
                <el-select
                  v-model="filterField.isRepeatNum"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in isRepeat"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="编号" class="row-padding-bottom">
                <el-input
                  v-model="filterField.numId"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="案件类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.caseType"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in caseTypeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item>
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="tableList">
        <el-row class="table-header">
          <!-- <el-col :span="12" style="text-align: left;display:inline-block;height:36px;line-height:36px">
              <span>查询表格</span>
            </el-col> -->
          <el-col :span="12" class="table-btn">
            <!-- <el-button
                class="commonBut saveBtn funComBut bzjAddJc"
                icon="icon iconfont icontianjia"
                @click="addDeclare"
              >
                <span class="opetareText">新增欠薪诉求</span>
              </el-button> -->
            <el-button
              class="commonBut saveBtn funComBut bzjAddJc"
              icon="icon iconfont icondaoru"
              @click="batchImport"
            >
              <span class="opetareText">批量导入</span>
            </el-button>
            <el-button
              class="commonBut saveBtn funComBut bzjAddJc"
              icon="icon iconfont icondaochu"
              @click="getExportList"
            >
              <span class="opetareText">导出</span>
            </el-button>
          </el-col>
        </el-row>
        <div
          ref="tableBox"
          :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
        >
          <el-table
            ref="tableBox1"
            :data="tableList"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            style="border: 1px solid #dfe6ec"
            :max-height="tableHeight"
            @sort-change="sortChange"
          >
            <el-table-column
              prop="numId"
              label="编号"
              min-width="150"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="专线收件时间"
              min-width="200"
              sortable="custom"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="caseTypeStr"
              label="案件类型"
              align="center"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="repeatTelDesc"
              label="号码标记"
              align="center"
              width="120"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="repeatNumDesc"
              label="诉求标记"
              align="center"
              width="120"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="countyName"
              label="区县"
              align="center"
              min-width="140"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="streetName"
              label="街道"
              align="center"
              min-width="140"
            ></el-table-column>
            <el-table-column
              prop="complaintContent"
              label="欠薪诉求"
              min-width="380"
            >
              <template slot-scope="scope">
                <p>{{ getSubStringSum(scope.row.complaintContent, 25) }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="complaintPerName"
              label="投诉人"
              align="center"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="complaintPerTel"
              label="联系电话"
              min-width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="complaintCompanyName"
              label="用人单位"
              min-width="200"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="progressNewTime"
              label="最近办理进展"
              sortable="custom"
              align="center"
              min-width="200"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="complaintEndDate"
              label="截止完成时间"
              sortable="custom"
              min-width="200"
              :formatter="formatTd"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="isDelay"
              label="是否延期"
              align="center"
              :formatter="formatIsDelay"
              min-width="200"
            ></el-table-column>
            <el-table-column
              prop="complaintSource"
              label="渠道来源"
              align="center"
              min-width="200"
            ></el-table-column>
            <el-table-column
              prop="complaintManagerNames"
              label="办理责任人"
              width="230"
              align="left"
            >
              <template slot-scope="scope">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.complaintManagerNames"
                  columnName="complaintManagerNames"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="办理状态"
              align="center"
              min-width="200"
              :formatter="formatStatus"
            ></el-table-column>
            <el-table-column label="操作" fixed="right" min-width="150">
              <template slot-scope="scope">
                <el-link type="primary" @click="toEdit(scope.$index, scope.row)"
                  >编辑</el-link
                >
                <span>
                  <el-link type="primary" @click="onDel(scope.row.id)"
                    >删除</el-link
                  >
                </span>
              </template>
            </el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="isShow">
              <emptyTable emptyText="暂无相关数据"></emptyTable>
            </div>
          </el-table>
          <paginationWH
            ref="pagination"
            @getList="getTableListData"
            :filterField="filterField"
            :requestUrl="requestUrl"
            @getpageNo="getpageNo"
            @getpageSize="getpageSize"
          ></paginationWH>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import { mapActions, mapState } from 'vuex'
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'specialAccountListList',
  mixins: [scrollTable],
  data() {
    return {
      advanced: false,
      //表格数据
      tableList: [],
      requestUrl: 'api-r/rbp/list',
      date: [],
      //搜索条件
      filterField: {
        sendAreaId: '', //区域
        complaintPerName: '', //投诉人
        complaintPerTel: '', //联系电话
        status: '', //办理状态
        complaintCompanyName: '', //用人单位
        createTimeStart: '', //收件起始日期
        createTimeEnd: '', //收件结束日期
        overDateStart: '', //办结起始日期
        overDateEnd: '', //办结结束日期
        isDelay: '', //是否延期（0：否，1：是）
        isRepeatTel: '', //是否重复号码（0：否，1：是）
        isRepeatNum: '', //是否重复诉求（0：否，1：是）
        numId: '', //编号
        isPerfect: '', //是否完善
        isTodayNoPro: 0, //今日未跟进
        isToday: 0, //是否今日新增
        isMine: 0, //是否我负责的诉求
        caseType: '', //案件类型
      },
      pageNo: 1, //页码
      pageSize: 20, //每页条数
      handleStateOptions: [
        {
          code: 2,
          name: '办理中',
        },
        {
          code: 3,
          name: '待进一步办理',
        },
        {
          code: 1,
          name: '已办结',
        },
      ],
      isDelayOptions: [
        {
          code: '1',
          name: '是',
        },
        {
          code: '0',
          name: '否',
        },
      ],
      isRepeat: [
        {
          code: '1',
          name: '重复',
        },
        {
          code: '0',
          name: '非重复',
        },
      ],
      caseTypeList: [],
    }
  },
  computed: { ...mapState(['areasOptions']) },
  mounted() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getTypeList()
    if (this.$route.params.caseType) {
      const { caseType, isRepeatNum, sendAreaId } = this.$route.params
      this.filterField.sendAreaId = sendAreaId
      this.sendAreaId = sendAreaId
      this.filterField.caseType = caseType
      this.filterField.isRepeatNum = isRepeatNum + ''
    }
  },

  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    ...mapActions(['getAreas']),
    /**
     * @description: 导出报表
     */
    getExportList() {
      const vm = this
      let sendAreaId = vm.filterField.sendAreaId //区域
      let complaintPerName = vm.filterField.complaintPerName //投诉人
      let complaintPerTel = vm.filterField.complaintPerTel //联系电话
      let status = vm.filterField.status //办理状态
      let complaintCompanyName = vm.filterField.complaintCompanyName //用人单位
      let createTimeStart = vm.filterField.createTimeStart //收件起始日期
      let createTimeEnd = vm.filterField.createTimeEnd //收件结束日期
      let overDateStart = vm.filterField.overDateStart //办结起始日期
      let overDateEnd = vm.filterField.overDateEnd //办结结束日期
      let isDelay = vm.filterField.isDelay //是否延期（0：否，1：是）
      let isRepeatTel = vm.filterField.isRepeatTel //是否重复号码（0：否，1：是）
      let isRepeatNum = vm.filterField.isRepeatNum //是否重复诉求（0：否，1：是）
      let numId = vm.filterField.numId //编号
      let isPerfect = '' //是否完善
      let isTodayNoPro = 0 //今日未跟进
      let isToday = 0 //是否今日新增
      let isMine = 0 //是否我负责的诉求
      let pageNo = 1 //页码
      let pageSize = 20 //每页条数
      window.location.href =
        common.commonApi +
        'api-r/rbp/export?sendAreaId=' +
        sendAreaId +
        '&complaintPerName=' +
        complaintPerName +
        '&complaintPerTel=' +
        complaintPerTel +
        '&status=' +
        status +
        '&complaintCompanyName=' +
        complaintCompanyName +
        '&createTimeStart=' +
        createTimeStart +
        '&createTimeEnd=' +
        createTimeEnd +
        '&overDateStart=' +
        overDateStart +
        '&overDateEnd=' +
        overDateEnd +
        '&isDelay=' +
        isDelay +
        '&isRepeatTel=' +
        isRepeatTel +
        '&isRepeatNum=' +
        isRepeatNum +
        '&numId=' +
        numId +
        '&isPerfect=' +
        isPerfect +
        '&isTodayNoPro=' +
        isTodayNoPro +
        '&isToday=' +
        isToday +
        '&isMine=' +
        isMine +
        '&caseType=' +
        vm.filterField.caseType +
        '&sort=' +
        vm.filterField.sort +
        '&sortField=' +
        vm.filterField.sortField +
        '&pageNo=' +
        pageNo +
        '&pageSize=' +
        pageSize +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
    /**
     * @description: 格式化办理状态
     */
    formatStatus(row, column) {
      for (var i = 0; i < this.handleStateOptions.length; i++) {
        if (this.handleStateOptions[i].code == row.status) {
          return this.handleStateOptions[i].name
        }
      }
    },
    /**
     * @description: 格式化是否延期
     */
    formatIsDelay(row, column) {
      for (var i = 0; i < this.isDelayOptions.length; i++) {
        if (this.isDelayOptions[i].code == row.isDelay) {
          return this.isDelayOptions[i].name
        }
      }
    },
    /**
     * @description: 格式化最近办理进展
     */
    formatProgressNewTime(row, column) {
      for (var i = 0; i < this.handleStateOptions.length; i++) {
        if (this.handleStateOptions[i].code == row.progressNewTime) {
          return this.handleStateOptions[i].name
        }
      }
    },
    /**
     * @description: 新增欠薪诉求
     */
    addDeclare() {
      this.$router.push('/home/unpaidComplaint/newBackPayDemands')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/backPayDemands',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 批量导入欠薪诉求
     */
    batchImport() {
      this.$router.push({
        path: '/home/unpaidComplaint/whBatchImportCase',
        namr: 'whBatchImportCase',
        query: {
          mark: 'backPayDemands',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/backPayDemands',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 获取收件起始日期
     * @param {*} val
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.createTimeStart = val
      } else {
        this.filterField.createTimeStart = ''
      }
    },
    /**
     * @description: 获取收件结束日期
     * @param {*} val
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.createTimeEnd = val
      } else {
        this.filterField.createTimeEnd = ''
      }
    },
    /**
     * @description: 获取办结起始日期
     * @param {*} val
     */
    getStartTimeValueTwo(val) {
      if (val) {
        this.filterField.overDateStart = val
      } else {
        this.filterField.overDateStart = ''
      }
    },
    /**
     * @description: 获取办结结束日期
     * @param {*} val
     */
    getEndTimeValueTwo(val) {
      if (val) {
        this.filterField.overDateEnd = val
      } else {
        this.filterField.overDateEnd = ''
      }
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    /**
     * @description: 获取全部欠薪诉求
     * @param {*} data
     */
    getTableListData(data) {
      let totalCount
      this.tableList = data.results
      totalCount = data.totalCount
      this.$emit('getTotalCount', totalCount)
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    /**
     * @description: 搜索欠薪诉求
     */
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    /**
     * @description: 欠薪诉求编辑
     * @param {*} index
     * @param {*} row
     */
    toEdit(index, row) {
      this.$router.push({
        path: '/home/unpaidComplaint/caseDetail',
        query: { id: row.id },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/backPayDemands',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 删除欠薪诉求
     * @param {*} index
     * @param {*} row
     */
    onDel(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delAllocatedSet(id)
        })
        .catch(() => {})
    },
    delAllocatedSet(id) {
      this.axios({
        method: 'post',
        url: 'api-r/rbp/delete',
        data: {
          rightsAppealId: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var sendAreaId = this.sendAreaId[this.sendAreaId.length - 1]
      this.filterField.sendAreaId = sendAreaId
    },
    getTypeList() {
      this.axios({
        method: 'post',
        data: { type: 'WH_CASE_TYPE' },
        url: 'api-bs/base/dicitem/findbytype',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.caseTypeList = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 198px;
}
.container {
  // padding-top: 24px;
}
.tableList {
  border-top: 10px solid #f5f7fa;
  // padding: 0px 24px;
}
.table-header {
  width: 100%;
  font-size: 16px;
  color: #333333;
  padding: 24px 24px 0 24px;
}
.table-btn {
  widows: 100%;
  height: 100%;
  text-align: left;
}
@import '../../../static/css/filterArea.less';
</style>
